<template>
  <span class="headerAvatar">
    <el-avatar v-if="avatar" :size="30" :src="avatar" />
    <el-avatar v-else :size="30" :src="noAvatar" />
  </span>
</template>

<script>
export default {
  name: 'Avatar'
}
</script>

<script setup>
import noAvatarPng from '@/assets/img/noBody.png'
import { computed, ref } from 'vue'
const props = defineProps({
  picSrc: {
    type: String,
    default: ''
  }
})

const noAvatar = ref(noAvatarPng)
const avatar = computed(() => {
  if (props.picSrc === '') {
    return null
  } else {
    return props.picSrc
  }
})

</script>

<style scoped>
.headerAvatar{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
